import React, { Component } from 'react';
import { Form, Input,InputNumber, Space, Button, message, Modal, Tabs, Select } from "antd";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import { apiTSysDictionariesDel, apiTSysDictionariesEdit, apiTSysDictionariesAdd, apiTSysDictionariesPage, apiTSysDictionariesView } from '@/request/storageManager/store.js'
const { TabPane } = Tabs;
const { TextArea } = Input;
export default class outPutDataType extends Component {
  constructor() {
    super()
    this.formRef = React.createRef()
    this.state = {
      defaultActiveKey: '1',
      outColumns: [
        {
          title: "出库单类型",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "类型值",
          dataIndex: "extra",
          key: "extra",
          render: (record) => {
            return record.value
          }
        },
        {
          title: "排序",
          dataIndex: "sort",
          key: "sort",
        },
        {
          title: "备注",
          dataIndex: "extra",
          key: "extra",
          render: (record) => {
            return record.remark
          }
        },
        {
          title: "操作",
          dataIndex: "serviceShowFile",
          key: "serviceShowFile",
          render: (text, render) => {
            return <div>
              {
                render.parentId == 0 ? <TheButton haspermi={['ERPsetting:outPutType:putAdd']} onClick={() => this.add(render)}>添加子分类</TheButton> : ''
              }
              {
                render.parentId == 0 || render.extra.isDefault == 0 ? '' : <TheButton haspermi={['ERPsetting:outPutType:outEdit']} onClick={() => this.edit(render)}>编辑</TheButton>
              }
              
              {
                render.parentId == 0 || render.extra.isDefault == 0 ? "" : <TheButton haspermi={['ERPsetting:outPutType:outDel']} onClick={() => this.del(render)}>删除</TheButton>
              }

            </div>
          }
        },
      ],
      isRemark: false,
      outDataSource: [],
      outPageData: {
        pageNo: 1,
        pageSize: 10

      },
      outTotal: 0,
      putColumns: [
        {
          title: "入库单类型",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "类型值",
          dataIndex: "extra",
          key: "extra",
          render: (record) => {
            return record.value
          }
        },
        {
          title: "排序",
          dataIndex: "sort",
          key: "sort",
        },
        {
          title: "备注",
          dataIndex: "extra",
          key: "extra",
          render: (record) => {
            return record.remark
          }
        },
        {
          title: "操作",
          dataIndex: "serviceShowFile",
          key: "serviceShowFile",
          render: (text, render,) => {
            return <div>
              {
                render.parentId == 0 ? <TheButton haspermi={['ERPsetting:outPutType:putAdd']} onClick={() => this.add(render)}>添加子分类</TheButton> : ''
              }
              {
                render.parentId == 0 || render.extra.isDefault == 0 ? '' : <TheButton haspermi={['ERPsetting:outPutType:putEdit']} onClick={() => this.edit(render)}>编辑</TheButton>
              }
              {
                render.parentId == 0 || render.extra.isDefault == 0 ? "" : <TheButton haspermi={['ERPsetting:outPutType:putDel']} onClick={() => this.del(render)}>删除</TheButton>
              }

            </div>
          }
        },
      ],
      putDataSource: [],
      putPageData: {
        pageNo: 1,
        pageSize: 10

      },
      putTotal: 0,
      isModalVisible: false,
      remark: '',
      modalTitle: '',
      dictionariesId: '',
      parentId: '',
    }
  }
  componentDidMount() {
    this.getOutData()
    this.getPutData()
  }
  // 出库单数据
  async getOutData() {
    let res = await apiTSysDictionariesPage({
      pageNo: this.state.outPageData.pageNo,
      pageSize: this.state.outPageData.pageSize,
      type: 'out_library_type',
      level: 1,
    })
    if (res.code === 0) {
      this.setState({
        outDataSource: res.data,
        outTotal: res.totalCount
      })
    }
  }
  // 入库单数据
  async getPutData() {
    let res = await apiTSysDictionariesPage({
      pageNo: this.state.outPageData.pageNo,
      pageSize: this.state.outPageData.pageSize,
      type: 'in_library_type',
      level: 1,
    })
    if (res.code === 0) {
      this.setState({
        putDataSource: res.data,
        putTotal: res.totalCount
      })
    }
  }
  // pageChange = (pageNo, pageSize) => {
  //   this.setState({
  //     outPageData: {
  //       pageNo, pageSize
  //     }
  //   }, () => {
  //     this.getOutData()
  //     this.getPutData()
  //   })
  // };
  async del(row) {
    React.$confirm({
      title: "提示",
      type: 'warning',
      content: "确定是否删除？",
      onOk: async () => {
        let res = await apiTSysDictionariesDel({ dictionariesId: row.dictionariesId })
        if (res.code === 0) {
          message.success(res.codeMessage)
          // this.pageChange(1, 10)
          this.getOutData()
          this.getPutData()
        }
      }
    });
  }
  // 添加子分类
  async add(row) {
    console.log(row);
    this.setState({
      isModalVisible: true,
      modalTitle: '添加子分类',
      pid: row.dictionariesId,
      parentId: '',
      dictionariesId: ''
    }, () => {
      this.formRef.current.setFieldsValue({
        outPutName: row.name,
        value:''
      })
    })
  }
  // 编辑
  async edit(row) {
    console.log(row);
    
    let res = await apiTSysDictionariesView({ dictionariesId: row.dictionariesId })
    if (res.code === 0) {
      let name = '' // 上级名称
      this.state.outDataSource.map((item) => {
        if (res.data.pid === item.dictionariesId) {
          name = item.name
        }
      })
      this.state.putDataSource.map((item) => {
        if (res.data.pid === item.dictionariesId) {
          name = item.name
        }
      })
      this.setState({
        isModalVisible: true,
        dictionariesId: row.dictionariesId,
        modalTitle: '编辑',
        parentId: row.parentId,
      }, () => {
        this.formRef.current.setFieldsValue({
          outPutName: name ? name : '上级类型',
          type: res.data.type,
          name: res.data.name,
          value: res.data.value,
          sort: res.data.sort,
          remark: res.data.remark,
        })
      })
    }
  }
  // 重置
  reset(e) {
   
    if (this.state.modalTitle === '编辑' ) {
      this.formRef.current.setFieldsValue({
        remark: '',
        name: '',
        sort: '',
      })
    }else{
      this.formRef.current.setFieldsValue({
      remark: '',
      name: '',
      value: '',
      sort: '',
    })
    }
    
  }
  async onFinish(values) {
    values.remark = values.remark ? values.remark : ''
    if (this.state.defaultActiveKey == '1') {
      if (this.state.dictionariesId === '') {
        let res = await apiTSysDictionariesAdd({ ...values, type: 'out_library_type', level: 2, pid: this.state.pid })
        if (res.code === 0) {
          message.success(res.codeMessage)
          // this.pageChange(1, 10)
          this.getOutData()
          this.getPutData()
          this.reset()
          this.setState({
            isModalVisible: false,
            dictionariesId: '',
          })
        }
      } else {
        let res = await apiTSysDictionariesEdit({ ...values, dictionariesId: this.state.dictionariesId, type: 'out_library_type',level: 2 })
        if (res.code === 0) {
          message.success(res.codeMessage)
          // this.pageChange(1, 10)
          this.getOutData()
          this.getPutData()
          this.reset()
          this.setState({
            isModalVisible: false,
            dictionariesId: '',
          })
        }
      }
    } else {
      if (this.state.dictionariesId === '') {
        let res = await apiTSysDictionariesAdd({ ...values, type: 'in_library_type', level: 2, pid: this.state.pid })
        if (res.code === 0) {
          message.success(res.codeMessage)
          // this.pageChange(1, 10)
          this.getOutData()
          this.getPutData()
          this.reset()
          this.setState({
            isModalVisible: false,
            dictionariesId: '',
          })
        }
      } else {
        let res = await apiTSysDictionariesEdit({ ...values, dictionariesId: this.state.dictionariesId, type: 'in_library_type', level: 2 })
        if (res.code === 0) {
          message.success(res.codeMessage)
          // this.pageChange(1, 10)
          this.getOutData()
          this.getPutData()
          this.reset()
          this.setState({
            isModalVisible: false,
            dictionariesId: '',
          })
        }
      }
    }

  }
  // 切换tabs
  onChange(e) {
    this.setState({
      defaultActiveKey: e
    })
  }
  destroyAll = () => {
    Modal.destroyAll();
  };
  render() {
    let { outColumns, parentId, outDataSource, outPageData, outTotal, putColumns, putDataSource, putPageData, putTotal, isModalVisible, defaultActiveKey, modalTitle } = this.state
    return (

      <div className="p-layout-box commodity-examine">
        <Tabs activeKey={defaultActiveKey} type="card" size={'small'} onChange={(e) => this.onChange(e)}>
          <TabPane tab="出库单类型" key="1" forceRender>
            <TheTable
              scroll={{ x: "max-content", y: '63vh' }}
              columns={outColumns}
              dataSource={outDataSource}
            />
            {/* <ThePagination
              pageNo={outPageData.pageNo}
              pageSize={outPageData.pageSize}
              total={outTotal}
              pageChange={this.pageChangeStore}
            /> */}
          </TabPane>

          <TabPane tab="入库单类型" key="2" forceRender>
            <TheTable
              scroll={{ x: "max-content", y: '63vh' }}
              columns={putColumns}
              dataSource={putDataSource}
            />
            {/* <ThePagination
              pageNo={putPageData.pageNo}
              pageSize={putPageData.pageSize}
              total={putTotal}
              pageChange={this.pageChangeStore}
            /> */}
          </TabPane>
        </Tabs>
        <Modal title={modalTitle} visible={isModalVisible} width="30%"
          onCancel={
            () => {
              this.reset()
              this.setState({ isModalVisible: false })
            }
          }
          footer={null}
        >
          <Form
            labelCol={{
              span: 6
            }}
            wrapperCol={{
              span: 14,
            }}
            ref={this.formRef}
            onFinish={(values) => this.onFinish(values)}
          >
            <Form.Item
              label="上级类型"
              name="outPutName"
            >
              <Input placeholder="上级类型" disabled ></Input>
            </Form.Item>
            <Form.Item
              label="类型名称"
              name="name"
              rules={[
                {
                  required: true,
                  message: '请输入类型名称',
                },
              ]}
            >
              <Input style={{
              }} placeholder='类型名称' maxLength={40}/>
            </Form.Item>
            {
              parentId == '0' ? '' : <Form.Item
                label="类型值"
                name="value"
                rules={[
                  {
                    required: true,
                    message: '请输入类型值',
                  },
                ]}
              >
                <InputNumber placeholder='类型值(数字)' min={0} precision={0} disabled={this.state.dictionariesId == "" ? false : true} />
              </Form.Item>
            }
            <Form.Item
              label="排序"
              name="sort"
              rules={[
                {
                  required: true,
                  message: '请输入排序',
                },
              ]}
            >
              <InputNumber min={0} precision={0} max={100000} placeholder='排序(数字)' />
            </Form.Item>
            <Form.Item
              label="备注"
              name="remark"
            >
              <TextArea style={{ height: '100px' }} placeholder='备注' showCount maxLength={50} />
            </Form.Item>
            <Form.Item wrapperCol={{
              offset: 8,
              span: 16,
            }}>
              <Space size="small" style={{ marginLeft: 10 }}>

                <Button type="default" onClick={(e) => this.reset(e)}>
                  重置
                </Button>
                <Button type="primary" htmlType="submit">
                  确定
                </Button>
              </Space>
            </Form.Item>
          </Form>
        </Modal>
      </div>
    );
  }
}
